<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 插槽</title>
    <script charset="UTF-8" src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <child>
        <!--普通插槽-->
        <!--<p>Dell</p>-->
        <!--具名插槽-->
        <div slot="header">header</div>
        <div slot="footer">footer</div>
    </child>
</div>
<script>
    Vue.component('child',{
        // 普通插槽
        // template:"<div><p>hello</p><slot>默认内容</slot></div>"
        // 具名插槽
        template:"<div><slot name='header'></slot><p>hello</p><slot name='footer'></slot></div>"
    });
    let vm = new Vue({
        el: '#app',
    });
</script>
</body>
</html>